<template>
    <div>
        <el-row :gutter="18">
            <el-col :span="20" >
                <div style="margin-left:20px;font-weight: bolder;color:#666">发布活动</div>
            </el-col>

            <el-col :span="4">
                <el-button @click="go">返回列表</el-button>
            </el-col>
        </el-row>
        <el-form  ref="form" :model="form" label-position="labelPosition" label-width="100px">
            <el-form-item label="活动标题" >
                <el-input style="width:400px" v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="活动说明" >
                <el-input
                        type="textarea"
                        :rows="3"
                        placeholder="活动说明"
                        v-model="form.desc" style="width:400px;">
                </el-input>
            </el-form-item>
            <el-form-item label="开始时间" >
            <div class="block">
                <el-date-picker
                        v-model="form.start_time"
                        type="datetime"
                        placeholder="选择日期时间" @input="start">
                </el-date-picker>
            </div>
            <!--<div class="block">-->
            <!--<el-date-picker-->
            <!--v-model="form.start_time"-->
            <!--type="date"-->
            <!--placeholder="选择日期"-->
            <!--:picker-options="pickerOptions0" @input="start">-->
            <!--</el-date-picker>-->
            <!--</div>-->
        </el-form-item>
            <el-form-item label="截止时间" >
                <div class="block">
                    <el-date-picker
                            v-model="form.end_time"
                            type="datetime"
                            placeholder="选择日期时间" @input="end">
                    </el-date-picker>
                </div>
            </el-form-item>
        </el-form>
        <!--:on-change="limit(file,fileList)"-->
        <div style="margin-bottom:20px;margin-left:45px;font-size:16px;color:#666;margin-top:60px">缩略图</div>
        <div style="margin-left:100px;margin-bottom:120px">
            <!--:on-preview="handlePictureCardPreview"-->
            <!--:on-success=""-->
            <!--<el-upload-->
                    <!--action="https://jsonplaceholder.typicode.com/posts/"-->
                    <!--list-type="picture-card"-->
                    <!--:on-success="succ"-->
                    <!--:on-remove="handleRemove">-->
                <!--<i class="el-icon-plus"></i>-->
            <!--</el-upload>-->
            <!--<el-dialog v-model="dialogVisible" size="tiny">-->
                <!--<img width="100%" :src="dialogImageUrl" alt="">-->
            <!--</el-dialog>-->
            <el-upload
                    class="avatar-uploader"
                    :action=fileUploadAction
                    :show-file-list="false"
                    :on-error="err"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div slot="tip" class="el-upload__tip">（支持png/jpg格式，文件大小不能超过3M）</div>
            </el-upload>
        </div>
        <el-form  label-position="labelPosition" label-width="100px">
            <el-form-item label="活动内容" >
                <!--<script id="editor" type="text/plain"></script>-->
                <div style="max-width:80%">
                    <script id="editor" type="text/plain"></script>
                </div>
            </el-form-item>
        </el-form>
        <div style="width:200px;margin:50px 100px;"><el-button  type="primary" style="width: 200px" @click="submit">发布活动</el-button></div>
    </div>
</template>
<script>
    import _http from '@/components/common/http.vue'
    import _param from '@/components/common/param.vue'
    import '@/assets/ueditor/ueditor.config.js'
    import '@/assets/ueditor/ueditor.all.min.js'
    import '@/assets/ueditor/ueditor.parse.min.js'
    import '@/assets/ueditor/lang/zh-cn/zh-cn.js'
    export default {
        data(){
            return {
                imageUrl: '',
                id:'',
                apiPort:{
///                    发布内容接口
                    fabuList:"activity/addActivity",
//                    回显接口
                    getBack:"activity/toeditActivity",
//                    编辑上传接口
                    editUp:'activity/editActivity'
                },
                editor:null,
                fileUploadAction:_param.param.fileUploadUrl,
                userid:'',
                textarea:'',
                form:{
                    title:'',
                    desc:'',
                    start_time:'',
                    end_time:'',
                    picture_url:'',
                    content:'',
                    userid:''
                },
                activeName: 'second',
                labelPosition: 'right',
                dialogImageUrl: '',
                dialogVisible: false,
                value1: '',
            };
        },
        mounted(){
            console.log(this.$route.query.info)
            this.id = this.$route.query.info
            this.userid=localStorage.getItem('userId')
            this.form.userid = localStorage.getItem('userId')
            var that = this
            this.editor = UE.getEditor('editor');
            if(this.id!=1){
                console.log(this.id)
                this.getBack(this.id)
            }
        },
        destroyed() {
            this.editor.destroy();
        },
        methods: {
            err(){
                this.$message.error('图片上传失败');
            },
            limit(file,fileList){
                console.log(file)
                console.log(fileList)
            },
//            发布提交
            submit(){
               if(this.id!=1){
                   this.editActive()
               }else{
                   this.addActive()
               }
        },
            addActive(){
                console.log(this.form.start_time)
                this.form.content=this.editor.getContent()
                console.log(this.form.start_time)
                console.log(this.form)
                var that = this
                var params = that.querystring.stringify(this.form)
                _http.axiosRequest(that,that.apiPort.fabuList,params,(res)=>{
                    if(res.data.code==100){
                    that.$message({
                        message: '活动新增成功',
                        type: 'success'
                    });
                    setTimeout(function(){
                        that.$router.go(-1)
                    },500)
                }else{
                    that.$message({
                        message:res.data.msg,
                        type: 'warning'
                    });
                }
            })
            },
            editActive(){
//                console.log(this.form)
//                console.log(this.form.start_time)
                this.form.content=this.editor.getContent()
                this.form.id = this.id
                var that = this
                console.log(this.form)
                var params = that.querystring.stringify(this.form)
                _http.axiosRequest(that,that.apiPort.editUp,params,(res)=>{
                    console.log(res)
                    if(res.data.code==100){
                    that.$message({
                        message: '活动编辑成功',
                        type: 'success'
                    });
                        setTimeout(function(){
                            that.$router.go(-1)
                        },500)
                }else{
                    that.$message({
                        message:res.data.msg,
                        type: 'warning'
                    });
                }
            })
            },
            start(){
                var d = new Date(this.form.start_time)
                this.form.start_time=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
            },
            end(){
                var b = new Date(this.form.end_time)
                this.form.end_time=b.getFullYear() + '-' + (b.getMonth() + 1) + '-' + b.getDate() + ' ' + b.getHours() + ':' + b.getMinutes() + ':' + b.getSeconds();
            },
//            获取回显内容
            getBack(id){
                var that = this
                var params = that.querystring.stringify({'id':id,'userid':this.form.userid})
                _http.axiosRequest(that,that.apiPort.getBack,params,(res)=>{
                    console.log(res)
                    that.form.title = res.data.data.title
                    that.form.desc = res.data.data.desc
                    that.editor.setContent(res.data.data.content)
                    that.form.start_time = res.data.data.start_time
                    that.form.end_time = res.data.data.end_time
                    that.dialogImageUrl = res.data.data.picture_url
//                    还有缩略图地址
                    that.imageUrl = res.data.data.picture_url
            })
            },
            pickerOptions0: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                }
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            go(){
                this.id=''
                this.$router.go(-1)
            },
            handleRemove(file, fileList) {

                console.log(file, fileList);
            },
            succ(response,file,fileList){
                console.log(file)
                console.log(fileList)
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                console.log(file)
                console.log(res.url)
                this.form.picture_url=res.url
            },
            beforeAvatarUpload(file) {
//                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 3;

                if (!(file.type == 'image/jpeg'||file.type == 'image/png')) {
                    this.$message.error('图片只能是 JPG或者PNG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 3MB!');
                }
                return isLt2M&&(file.type == 'image/jpeg'||file.type == 'image/png');
            }
        }
    };
</script>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>